<template>
  <div class="main-menu">
    <div class="logo">
      <img src="../../assets/img/logo.svg" alt="" />
      <el-text class="mx-1 text" truncated>codeluo</el-text>
    </div>
    <div class="menu">
      <el-menu
        default-active="39"
        class="el-menu-vertical-demo"
        text-color="#b7bdc3"
        active-text-color="#fff"
        background-color="#001529"
      >
        <template v-for="item in userMenu" :key="item">
          <el-sub-menu :index="String(item.id)">
            <template #title>
              <el-icon> <component :is="item.icon.split('el-icon')[1]"></component></el-icon>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <template v-for="t in item.children" :key="t.id">
                <el-menu-item :index="String(t.id)">{{ t.name }}</el-menu-item>
              </template>
            </el-menu-item-group>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/stores/login'
import { storeToRefs } from 'pinia'

const loginStore = useLoginStore()
const { userMenu } = storeToRefs(loginStore)
console.log(userMenu)
</script>

<style lang="less" scoped>
.main-menu {
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: var(--background-menu1);
  // login 和标题
  .logo {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 70px;
    overflow: hidden;
    color: #fff;
    img {
      width: 40px;
      height: 40px;
      // margin-left: 10px;
    }
    h1 {
      margin-right: 10px;
      font-size: 18px;
      font-weight: 700;
      white-space: nowrap;
    }
  }
  // 下拉菜单 style

  .el-menu {
    border-right: none;
    user-select: none;
  }

  .el-sub-menu {
    .el-menu-item {
      padding-left: 50px !important;
      background-color: #0c2135;
    }

    .el-menu-item:hover {
      color: #fff;
    }

    .el-menu-item.is-active {
      background-color: #0a60bd;
    }
  }
}
.logo {
  display: flex;
  height: 50px;
  img {
    width: 60px;
    height: 100%;
  }

  .text {
    font-size: 25px;
    color: #ffffff;
  }
}
</style>
